Programmation Client II¶

JSON & local storage¶

Le problème¶

Des fois, il faut "enregister des données"¶

Quand?¶

  • Lorsque le client (navigateur) veut envoyer un message au serveur

  • Lorsque le serveur (navigateur) veut envoyer un message au client

  • Lorsqu'on peut "persister" des données.

C'est quoi persister?¶

  • C'est d'écrire des données comme un string
  • Le string n'est pas nécessairement façile à lire

Exemple¶

Je veux persister les données suivantes:

const data = [
   {name: "didier", note: "76", course: "420-301-ah"},
   {name: "justyn", note: "68", course: "420-258-ah"},
   {name: "gilles", note: "98", course: "420-854-ah"},
]

Idée pas conne pantoute...¶

On va écrire les donnée en string...

const data = `
[
   {name: "didier", note: "76", course: "420-301-ah"},
   {name: "justyn", note: "68", course: "420-258-ah"},
   {name: "gilles", note: "98", course: "420-854-ah"},
]
`;

Conclusion¶

Vous avez pratiquement inventé le JSON

-- didier

Local Storage¶

Où pouvons-nous enregistrer des données?¶

Serveur:¶

  1. fichier sur le disque
  2. Base de données
  3. Autre services

Client:¶

  1. Serveur
  2. Local Storage
  3. Autre services

Local Storage?¶

Il s'agit d'un petit object (clé/valeur, string/string) qui est persisté entre les rafraichement.

Exemple pédagogique¶

window.localStorage.setItem("nom", "didier");
// refresh le navigateur
console.log(window.localStorage.getItem("nom"));

API¶

  • window.localStorage.setItem(key, value) associe value à key de manière permanante
  • window.localStorage.getItem(key) retourne la valeur associée à key
  • window.localStorage.removeItem(key) enlève la valeur associée à key
  • window.localStorage.clear() enlève toutes les valeurs

https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage

Notes¶

  • Le localstorage est associé au domaine. https://example.com/foo.html partagera le même localstorage que https://example.com/toto.html

  • C'est tout

JSON¶

JSON (JavaScript Object Notation)¶

  • C'est le standard de sérialisation de données.

  • C'est un sous ensemble du vieux javascript

  • C'est "humain readable"

  • C'est relativement rapide à lire pour un ordinateur

Exemple¶

{
    "menu": {
        "id": "file",
        "value": "File",
        "readable": false,
        "priority": 18,
        "popup": {
            "menuitem": [
                { "value": "New", "onclick": "CreateNewDoc()" },
                { "value": "Close", "onclick": "CloseDoc()" }
            ]
        }
    }
}

flowchart LR
  A["Web Browser"]<-- JSON -->B["Serveur"]
  C["Machin"]<-- JSON -->D["Serveur"]
  E["Machin X"]<-- JSON -->F["Machin Y"]

Quote incroyable¶

Le JSON c'est le excel du programmeur.

-- didier

Pourquoi JSON est cool?¶

  • Le plus gros projet de Daniel Lemire est un sérializer JSON
  • Mongo est une base de donnée (ishhhh...) JSON
  • Postgres/Mysql supportent JSON out of the box
  • Regardes dans votre ordi vous avez combien de fichier .json, j'en ai 28 598

JSON: le top level object... devrait toujours être un object¶

{
    "message": "ceci est un bon json"
}
  • Il n'est pas permis d'avoir une virgule après la dernière valeur.
  • Les clés doivent être des string avec double quotes: "

JSON: On peut mettre des strings!¶

{
    "message": "ceci est un bon json"
}
  • Les strings doivent absolument être délimité par des double quotes: "

JSON: On peut mettre des nombres!¶

{
    "message": "ceci est un bon json"
    "timestamp": 176326534,
    "longeur": 8973.32657
}
  • Nombre comme en javascript (à virgule où entiers)

JSON: On peut mettre des booleans!¶

​

{
    "message": "ceci est un bon json"
    "timestamp": 176326534,
    "longeur": 8973.32657,
    "isProblem": false
}
  • Comme en javascript (true ou false)

JSON: On peut mettre des null!¶

​

{
    "message": "ceci est un bon json"
    "timestamp": 176326534,
    "longeur": 8973.32657,
    "isProblem": false,
    "problem": null
}
  • Comme en javascript (null)

JSON: On peut mettre des listes!¶

​

{
    "message": "ceci est un bon json"
    "timestamp": 176326534,
    "longeur": 8973.32657,
    "isProblem": false,
    "problem": null,
    "people": ["steve", "bob", "stéphan"]
}
  • La dernière valeur d'une liste ne peut être suivi d'une virgule

En gros:¶

JSON c'est du javascript de 1999

-- didier

Les outils JSON¶

Il y a un Gazillion d'outils pour travailler avec json¶

  • Chrome JSON Viewer un plugin pour linter tout siteweb qui montre du JSON

  • JSON Lint un site web qui lint du json

  • jq un outil command line qui travaille avec le json

Sérializer/désérializer du JSON¶

Exemple pédagogique¶

const data = {
    message: "ceci est un bon json"
    timestamp: 176326534,
    longeur: 8973.32657,
    isProblem: false,
    problem: null,
    people: ['steve', 'bob', "stéphan", ],
}
const json = JSON.stringify(data)
console.log(json)
const parserData = JSON.parse(json);

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON

Exemple complet avec localStorage¶

const data = {
    message: "ceci est un bon json"
    timestamp: 176326534,
    longeur: 8973.32657,
    isProblem: false,
    problem: null,
    people: ['steve', 'bob', "stéphan", ],
}
const json = JSON.stringify(data)
localStorage.setItem("data", json);

refresh!

const data = JSON.parse(localStorage.getItem("data"));
console.log(data)

Exercices¶

Exo 1¶

Écrire une représentation JSON du dernier disque de Tailor Swift.

https://en.wikipedia.org/wiki/Midnights#Track_listing

Exo 2¶

Faire une page web comme celle-ci mais où le résultat est persisté dans localstorage. C'est à dire qu'il faut que la liste reste la même lorsque l'usagé rafraichie son navigateur.

  • Les fichiers sont accessibles sur https://github.com/didiercrunch/cours-420-301-ah/tree/main/persistance
  • Foo
  • Bar